<template>
  <view class="controlCheck-container">
    <u-navbar placeholder autoBack>
      <view slot="center" style="width: 70vw">
        <TopBar :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange" backgroundColor="#fff" />
      </view>
    </u-navbar>
    <component
      v-bind:is="currentTabComponent"
      :data="projectInfoResp"
      v-if="projectInfoResp.length || Object.keys(projectInfoResp).length"
      :status="form.status"
    />
    <view v-else>
      <Empty />
    </view>
    <view class="submit-group">
      <uni-forms class="form-zone" ref="form" :modelValue="form" :rules="rules" labelWidth="70vw" labelPosition="top">
        <cu-cell-group>
          <uni-forms-item name="status">
            <cu-cell-select
              v-model="form.status"
              :list="opinions"
              labelKey="text"
              valueKey="value"
              title="审批意见"
              placeholder="请选择审批意见"
              link
              required
              @confirm="onResultChange"
            />
          </uni-forms-item>
          <uni-forms-item v-if="form.status === 4" name="userId">
            <cu-cell
              title="审核人"
              required
              link
              placeholder="选择人员"
              :description="form.userName"
              @click="showUserSelect('ahChargeUser')"
            />
          </uni-forms-item>
        </cu-cell-group>
      </uni-forms>
      <button class="u-button block" :ripple="true" @click="approve">确定</button>
    </view>
    <!-- 0. 普通岗位 1管理岗位 2.公司领导 -->
    <UserSelector ref="userSelectorRef" :expand-fields="{ postType: 2 }" @change="handleUserSelectorChange" />
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import TopBar from '@/components/top-bar/index.vue'
import ProjectInfo from './components/projectInfo.vue'
import WorkType from './components/workType.vue'
import CuFilter from '@/components/cu-filter/cu-filter.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuCellSelect from '@/components/cu-cell/cu-cell-select.vue'
import UserSelector from '@/components/user-selector/index.vue'

import { getProjectInfo, getWorkType, projectApprovalChange, projectApprove } from '../../../api/spw/project'
import UNavbar from '@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue'

export default {
  components: {
    UNavbar,
    Empty,
    TopBar,
    ProjectInfo,
    WorkType,
    CuFilter,
    CuCellGroup,
    CuCell,
    CuCellSelect,
    UserSelector
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },

  data() {
    return {
      projectInfoResp: [],
      pageNum: 1,
      total: null,
      tabBars: [
        {
          name: '项目信息',
          componentName: 'ProjectInfo',
          index: 0
        },
        {
          name: '作业类型',
          componentName: 'WorkType',
          index: 1
        }
      ],
      tabIndex: 0,
      opinions: [
        {
          text: '通过',
          value: 2
        },
        {
          text: '不通过',
          value: 3
        },
        {
          text: '上报审批',
          value: 4
        }
      ],
      form: {
        status: '',
        statusLabel: '',
        userId: '',
        userName: ''
      },
      projectId: '',
      projectInfoId: '',
      rules: {
        status: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        userId: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    // this.initData();
  },
  onReachBottom() {
    this.pageNum++
    // this.getList();
  },
  onTabItemTap(e) {
    this.initData()
  },
  onLoad(option) {
    const { projectId, projectInfoId } = option
    this.projectId = projectId
    this.projectInfoId = projectInfoId
  },
  methods: {
    onResultChange(val) {
      this.form.status = val.value
      this.form.statusLabel = val.text
    },
    showUserSelect() {
      this.$refs.userSelectorRef.open()
    },
    handleUserSelectorChange({ value, name }) {
      console.log(name, value)
      this.form.userId = value
      this.form.userName = name
    },
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
      this.projectInfoResp = []
      this.initData()
    },
    initData() {
      this.pageNum = 1
      this.total = null
      this.getList()
    },
    getList() {
      let api = [getProjectInfo, getWorkType]
      api[this.tabIndex](this.projectInfoId).then((res) => {
        this.projectInfoResp = res.data
        uni.stopPullDownRefresh()
      })
    },
    approve() {
      this.$refs.form.validate().then((res) => {
        let api = [projectApprovalChange, projectApprove]
        let idx = ''
        let p1,
          p2 = '',
          p3 = ''
        if (this.form.status === 4) {
          idx = 0
          p1 = this.projectId
          p2 = this.form.userId
          p3 = this.form.userName
        } else {
          idx = 1
          p1 = this.projectInfoId
          p2 = this.form.status
        }
        api[idx](p1, p2, p3).then(() => {
          this.$modal.msgSuccess('操作成功')
          const eventChannel = this.getOpenerEventChannel()
          eventChannel.emit('callback:reload')
          uni.navigateBack()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}

.form-zone {
  margin-bottom: 25px;
  ::v-deep .cu-cell__item {
    padding: 15px 0;
  }
  ::v-deep .uni-forms-item__error {
    display: flex;
    width: 98%;
    justify-content: flex-end;
  }
}
</style>
